<template>
  <div id="staModulehomeDiv">
    <Breadcrumb content="模块标准库" />
    <div class="bodyContent">
      <el-tabs type="border-card" v-model="activeName" @tab-click="tabHandleClick">
        <el-tab-pane label="首页" name="homePane">
          <el-scrollbar style="height: 100%">
            <div class="flex flex-wrap padding-sm">
              <el-card class="margin-lr-sm margin-tb-sm cursor  light" style="text-align: center;" @click="cardChange('staBacGerm')">
                <img :src="`${getAssetsFile('images/staDataBase/wsw.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">微生物</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('stabacAntibiotics')">
                <img :src="`${getAssetsFile('images/staDataBase/kss.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">抗生素</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('rsff')">
                <img :src="`${getAssetsFile('images/staDataBase/rsff.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">染色方法</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('pyj')">
                <img :src="`${getAssetsFile('images/staDataBase/pyj.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">培养基</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('jgmb')">
                <img :src="`${getAssetsFile('images/staDataBase/jgmb.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">结果描述模板</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('zjmb')">
                <img :src="`${getAssetsFile('images/staDataBase/zjmb.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">专家评语模板</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('zhedian')">
                <img :src="`${getAssetsFile('images/staDataBase/zhedian.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">折点</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('sensitivePane')">
                <img :src="`${getAssetsFile('images/staDataBase/sensitive.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">敏感性代码</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('antGroupPane')">
                <img :src="`${getAssetsFile('images/staDataBase/antGroup.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">抗生素分组</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('resistantTypePane')">
                <img :src="`${getAssetsFile('images/staDataBase/resistantType.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">耐药类型</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('phenotypePane')">
                <img :src="`${getAssetsFile('images/staDataBase/phenotype.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">耐药表型</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('infectSitePane')">
                <img :src="`${getAssetsFile('images/staDataBase/infectSite.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">感染部位</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('testMthPane')">
                <img :src="`${getAssetsFile('images/staDataBase/testMth.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">药敏测试方法</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('countPane')">
                <img :src="`${getAssetsFile('images/staDataBase/colonyCount.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">菌落计数</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('jymd')">
                <img :src="`${getAssetsFile('images/staDataBase/jymd.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">微生物检验目的</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('pyjzh')">
                <img :src="`${getAssetsFile('images/staDataBase/pyjzh.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">培养基组合</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('msxjg')">
                <img :src="`${getAssetsFile('images/staDataBase/msxjg.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">描述性结果</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('othResultPane')">
                <img :src="`${getAssetsFile('images/staDataBase/pyj.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">培养过程结果</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('jlxtlx')">
                <img :src="`${getAssetsFile('images/staDataBase/jlxtlx.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">菌落形态类型</div>
              </el-card>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="微生物" name="staBacGerm">
          <StaBacGermDict ref="staBacGermRef" />
        </el-tab-pane>
        <el-tab-pane label="抗生素" name="stabacAntibiotics">
          <StabacAntibioticsDict ref="stabacAntibioticsRef" />
        </el-tab-pane>
        <el-tab-pane label="染色方法" name="rsff">
          <StaStainingMethod ref="rsffRef" />
        </el-tab-pane>
        <el-tab-pane label="培养基" name="pyj">
          <StaCultureMedium ref="pyjRef" />
        </el-tab-pane>
        <el-tab-pane label="结果描述模板" name="jgmb">
          <StaDiagnosTempDesc ref="jgmbRef" />
        </el-tab-pane>
        <el-tab-pane label="专家评语模板" name="zjmb">
          <StaDiagnosTempExpert ref="zjmbRef" />
        </el-tab-pane>
        <el-tab-pane label="折点" name="zhedian">
          <StaBreakPoint ref="zhedianRef" />
        </el-tab-pane>
        <el-tab-pane label="敏感性代码" name="sensitivePane">
          <StaSensitive ref="staSensitiveRef" />
        </el-tab-pane>
        <el-tab-pane label="抗生素分组" name="antGroupPane">
          <StaAntProposalGroup ref="staAntProposalGroupRef" />
        </el-tab-pane>
        <el-tab-pane label="耐药类型" name="resistantTypePane">
          <StaResistantType ref="staResistantTypeRef" />
        </el-tab-pane>
        <el-tab-pane label="耐药表型" name="phenotypePane">
          <StaResistantPhenotype ref="staResistantPhenotypeRef" />
        </el-tab-pane>
        <el-tab-pane label="感染部位" name="infectSitePane">
          <StaInfectSite ref="staInfectSiteRef" />
        </el-tab-pane>
        <el-tab-pane label="药敏测试方法" name="testMthPane">
          <StaDrugTestMth ref="staDrugTestMthRef" />
        </el-tab-pane>
        <el-tab-pane label="菌落计数" name="countPane">
          <StaColonyCount ref="staColonyCountRef" />
        </el-tab-pane>
        <el-tab-pane label="微生物检验目的" name="jymd">
          <StaReqPurpose ref="jymdRef" />
        </el-tab-pane>
        <el-tab-pane label="培养基组合" name="pyjzh">
          <StaCultureCombination ref="pyjzhRef" />
        </el-tab-pane>
        <el-tab-pane label="描述性结果" name="msxjg">
          <StaDescOption ref="msxjgRef" />
        </el-tab-pane>

        <el-tab-pane label="培养过程结果" name="othResultPane">
          <StaOthResultDict ref="staOthResultDictRef" />
        </el-tab-pane>
        <el-tab-pane label="菌落形态类型" name="jlxtlx">
          <StaColonialMorphologyType ref="jlxtlxRef" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
let { proxy }: any = getCurrentInstance();
import { AppStore } from '@/stores/store'; //'../../../stores/store';
import { notifyType, notifyMessage, getAssetsFile } from '@/utils/common';
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import StaBacGermDict from './StaBacGermDict.vue';
import StabacAntibioticsDict from './StabacAntibioticsDict.vue'; //基本信息表单组件
import StaStainingMethod from './StaStainingMethod.vue'; //基本信息表单组件
import StaCultureMedium from './StaCultureMedium.vue'; //基本信息表单组件
import StaBreakPoint from './StaBreakPoint.vue'; //基本信息表单组件
import StaSensitive from './StaSensitive.vue'; //基本信息表单组件
import StaDiagnosTempDesc from './StaDiagnosTempDesc.vue'; //基本信息表单组件
import StaDiagnosTempExpert from './StaDiagnosTempExpert.vue'; //基本信息表单组件
import StaAntProposalGroup from './StaAntProposalGroup.vue'; //基本信息表单组件
import StaResistantType from './StaResistantType.vue'; //基本信息表单组件
import StaResistantPhenotype from './StaResistantPhenotype.vue'; //基本信息表单组件
import StaInfectSite from './StaInfectSite.vue'; //基本信息表单组件
import StaDrugTestMth from './StaDrugTestMth.vue'; //基本信息表单组件
import StaReqPurpose from './StaReqPurpose.vue'; //基本信息表单组件
import StaCultureCombination from './StaCultureCombination.vue'; //基本信息表单组件
import StaColonyCount from './StaColonyCount.vue'; //基本信息表单组件
import StaDescOption from './StaDescOption.vue'; //基本信息表单组件
import StaOthResultDict from './StaOthResultDict.vue'; //基本信息表单组件
import StaColonialMorphologyType from './StaColonialMorphologyType.vue'; //基本信息表单组件

let store = AppStore();
let staBacGermRef: any = ref(null);
let stabacAntibioticsRef: any = ref(null);
let rsffRef: any = ref(null);
let pyjRef: any = ref(null);
let jgmbRef: any = ref(null);
let zjmbRef: any = ref(null);
let zhedianRef: any = ref(null);
let staSensitiveRef: any = ref(null);
let staAntProposalGroupRef: any = ref(null);
let staResistantTypeRef: any = ref(null);
let staResistantPhenotypeRef: any = ref(null);
let staInfectSiteRef: any = ref(null);
let staDrugTestMthRef: any = ref(null);
let staColonyCountRef: any = ref(null);
let jymdRef: any = ref(null);
let pyjzhRef: any = ref(null);
let msxjgRef: any = ref(null);
let staOthResultDictRef: any = ref(null);
let jlxtlxRef:any = ref(null);
let activeName = ref('homePane');

function cardChange(tabPane: any) {
  activeName.value = tabPane;
  if (activeName.value == 'staBacGerm') {
    staBacGermRef.value.initPage();
  } else if (activeName.value == 'stabacAntibiotics') {
    stabacAntibioticsRef.value.initPage();
  } else if (activeName.value == 'rsff') {
    rsffRef.value.initPage();
  } else if (activeName.value == 'pyj') {
    pyjRef.value.initPage();
  } else if (activeName.value == 'jgmb') {
    jgmbRef.value.initPage();
  } else if (activeName.value == 'zjmb') {
    zjmbRef.value.initPage();
  } else if (activeName.value == 'zhedian') {
    zhedianRef.value.initPage();
  } else if (activeName.value == 'sensitivePane') {
    staSensitiveRef.value.initPage();
  } else if (activeName.value == 'antGroupPane') {
    staAntProposalGroupRef.value.initPage();
  } else if (activeName.value == 'resistantTypePane') {
    staResistantTypeRef.value.initPage();
  } else if (activeName.value == 'phenotypePane') {
    staResistantPhenotypeRef.value.initPage();
  } else if (activeName.value == 'infectSitePane') {
    staInfectSiteRef.value.initPage();
  } else if (activeName.value == 'testMthPane') {
    staDrugTestMthRef.value.initPage();
  } else if (activeName.value == 'countPane') {
    staColonyCountRef.value.initPage();
  } else if (activeName.value == 'jymd') {
    jymdRef.value.initPage();
  } else if (activeName.value == 'pyjzhRef') {
    pyjzhRef.value.initPage();
  } else if (activeName.value == 'msxjg') {
    msxjgRef.value.initPage();
  } else if (activeName.value == 'othResultPane') {
    staOthResultDictRef.value.initPage();
  }else if (activeName.value == 'jlxtlx') {
    jlxtlxRef.value.initPage();
  }
}

function tabHandleClick(tab: any) {
  if (tab.props.name == 'staBacGerm') {
    staBacGermRef.value.initPage();
  } else if (tab.props.name == 'stabacAntibiotics') {
    stabacAntibioticsRef.value.initPage();
  } else if (tab.props.name == 'rsff') {
    rsffRef.value.initPage();
  } else if (tab.props.name == 'pyj') {
    pyjRef.value.initPage();
  } else if (tab.props.name == 'jgmb') {
    jgmbRef.value.initPage();
  } else if (tab.props.name == 'zjmb') {
    zjmbRef.value.initPage();
  } else if (tab.props.name == 'zhedian') {
    zhedianRef.value.initPage();
  } else if (tab.props.name == 'sensitivePane') {
    staSensitiveRef.value.initPage();
  } else if (tab.props.name == 'antGroupPane') {
    staAntProposalGroupRef.value.initPage();
  } else if (tab.props.name == 'resistantTypePane') {
    staResistantTypeRef.value.initPage();
  } else if (tab.props.name == 'phenotypePane') {
    staResistantPhenotypeRef.value.initPage();
  } else if (tab.props.name == 'infectSitePane') {
    staInfectSiteRef.value.initPage();
  } else if (tab.props.name == 'testMthPane') {
    staDrugTestMthRef.value.initPage();
  } else if (tab.props.name == 'countPane') {
    staColonyCountRef.value.initPage();
  } else if (tab.props.name == 'jymd') {
    jymdRef.value.initPage();
  } else if (tab.props.name == 'pyjzhRef') {
    pyjzhRef.value.initPage();
  }else if (tab.props.name == 'othResultPane') {
    staOthResultDictRef.value.initPage();
  }else if (tab.props.name == 'jlxtlx') {
    jlxtlxRef.value.initPage();
  }
}
</script>

<style lang="scss" scoped>
#staModulehomeDiv {
  width: 100%;
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .contentDiv {
      height: 100%;
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 5px 5px 0;
      }

      .vxe-form {
        :deep(.vxe-form--item) {
          margin-right: 10px;
        }
      }

      .tableBox {
        height: calc(100% - 40px);
      }
    }
  }

  .leftTable {
    height: calc(100% - 30px);
  }

  :deep(.el-tabs) {
    height: 100%;
  }

  :deep(.el-tabs__content) {
    padding: 0;
    height: calc(100% - 40px);

    .el-tab-pane {
      height: 100%;

      .homeimg {
        width: 70px;
        height: 70px;
      }
    }
  }
}
</style>